<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站活跃用户列表样式</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      background-color: #f5f5f5;
    }
    
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .header {
      height: 56px;
      background-color: white;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
    
    .header-btn {
      background: none;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 18px;
    }
    
    .header-btn:hover {
      background-color: #f5f5f5;
    }
    
    .content {
      flex: 1;
      overflow-y: auto;
    }
    
    .section-title {
      padding: 16px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      border-bottom: 1px solid #eee;
      background-color: white;
    }
    
    /* 用户    /* 用户列表通用样式 */
    .user-list {
      background-color: white;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .user-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
    }
    
    .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      position: relative;
    }
    
    .user-status {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid white;
    }
    
    .status-online {
      background-color: #07C160;
    }
    
    .status-offline {
      background-color: #ddd;
    }
    
    .status-away {
      background-color: #FF9800;
    }
    
    .user-info {
      margin-left: 12px;
      flex: 1;
    }
    
    .user-name {
      font-weight: 500;
      color: #333;
      margin-bottom: 2px;
    }
    
    .user-meta {
      font-size: 12px;
      color: #999;
    }
    
    .user-action {
      margin-left: 8px;
    }
    
    .action-btn {
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
    }
    
    .btn-follow {
      background-color: #4263EB;
      color: white;
    }
    
    .btn-following {
      background-color: #f5f5f5;
      color: #666;
    }
    
    .btn-message {
      background-color: #f0f5ff;
      color: #4263EB;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 各风格特定样式 */
    /* 1. 基础信息式 */
    #style1 .user-item {
      transition: background-color 0.2s;
    }
    
    #style1 .user-item:hover {
      background-color: #f9f9f9;
    }
    
    /* 2. 带互动数据式 */
    #style2 .user-interaction {
      display: flex;
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }
    
    #style2 .interaction-item {
      display: flex;
      align-items: center;
      margin-right: 16px;
    }
    
    #style2 .interaction-item i {
      margin-right: 4px;
      font-size: 12px;
    }
    
    /* 3. 网格卡片式 */
    #style3 .user-list {
      display: flex;
      flex-wrap: wrap;
      padding: 8px;
    }
    
    #style3 .user-item {
      flex-direction: column;
      align-items: center;
      width: 33.333%;
      padding: 16px 8px;
      border-bottom: none;
      border-radius: 8px;
    }
    
    #style3 .user-avatar {
      width: 64px;
      height: 64px;
    }
    
    #style3 .user-info {
      margin-left: 0;
      margin-top: 8px;
      text-align: center;
    }
    
    #style3 .user-meta {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    #style3 .user-action {
      margin-left: 0;
      margin-top: 8px;
      width: 100%;
      text-align: center;
    }
    
    #style3 .action-btn {
      width: 80%;
      padding: 4px 0;
    }
    
    /* 4. 带最近动态式 */
    #style4 .user-item {
      padding: 16px;
    }
    
    #style4 .user-recent {
      background-color: #f5f5f5;
      padding: 10px 12px;
      border-radius: 8px;
      margin-top: 8px;
      font-size: 14px;
      color: #333;
      line-height: 1.4;
    }
    
    #style4 .recent-time {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
    
    /* 5. 深色模式 */
    #style5 {
      background-color: #121212;
    }
    
    #style5 .header,
    #style5 .section-title,
    #style5 .user-list {
      background-color: #1e1e1e;
      border-color: #333;
    }
    
    #style5 .header-title,
    #style5 .section-title,
    #style5 .user-name,
    #style5 .user-recent {
      color: white;
    }
    
    #style5 .header-btn,
    #style5 .user-meta,
    #style5 .recent-time,
    #style5 .interaction-item {
      color: #aaa;
    }
    
    #style5 .user-status {
      border-color: #1e1e1e;
    }
    
    #style5 .btn-following {
      background-color: #333;
      color: #aaa;
    }
    
    #style5 .btn-message {
      background-color: #2c3e50;
      color: #58a9ff;
    }
    
    #style5 .style-switcher {
      background-color: #1e1e1e;
    }
    
    #style5 .style-btn {
      color: #ddd;
    }
    
    #style5 .user-item:hover {
      background-color: #2a2a2a;
    }
    
    #style5 .user-recent {
      background-color: #333;
    }
    
    /* 6. 标签筛选式 */
    #style6 .filter-bar {
      display: flex;
      padding: 8px 16px;
      background-color: white;
      border-bottom: 1px solid #eee;
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    #style6 .filter-bar::-webkit-scrollbar {
      display: none;
    }
    
    #style6 .filter-tag {
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 14px;
      margin-right: 8px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    #style6 .filter-tag.active {
      background-color: #4263EB;
      color: white;
    }
    
    #style6 .filter-tag:not(.active) {
      background-color: #f5f5f5;
      color: #666;
    }
    
    #style6 .user-badge {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      margin-left: 6px;
      font-weight: normal;
    }
    
    #style6 .badge-new {
      background-color: #fff0f0;
      color: #E6162D;
    }
    
    #style6 .badge-popular {
      background-color: #fff7e6;
      color: #FF7D00;
    }
    
    #style6 .badge-verified {
      background-color: #e6f4ff;
      color: #0066CC;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">基础信息</button>
    <button class="style-btn" data-style="style2">互动数据</button>
    <button class="style-btn" data-style="style3">网格卡片</button>
    <button class="style-btn" data-style="style4">最近动态</button>
    <button class="style-btn" data-style="style5">深色模式</button>
    <button class="style-btn" data-style="style6">标签筛选</button>
  </div>
  
  <!-- 1. 基础信息式活跃用户列表 -->
  <div id="style1" class="user-style active">
    <div class="header">
      <button class="header-btn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="header-title">活跃用户</h1>
      <button class="header-btn">
        <i class="fa fa-search"></i>
      </button>
    </div>
    
    <div class="content">
      <h2 class="section-title">推荐关注</h2>
      <ul class="user-list">
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">张小明</div>
            <div class="user-meta">产品设计师 · 328位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">李华</div>
            <div class="user-meta">前端开发 · 156位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="user-avatar">
            <span class="user-status status-away"></span>
          </div>
          <div class="user-info">
            <div class="user-name">王芳</div>
            <div class="user-meta">UI设计师 · 89位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-following">已关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="user-avatar">
            <span class="user-status status-offline"></span>
          </div>
          <div class="user-info">
            <div class="user-name">赵伟</div>
            <div class="user-meta">后端开发 · 210位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">陈静</div>
            <div class="user-meta">内容运营 · 56位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-following">已关注</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 2. 带互动数据式活跃用户列表 -->
  <div id="style2" class="user-style">
    <div class="header">
      <button class="header-btn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="header-title">热门用户</h1>
      <button class="header-btn">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    
    <div class="content">
      <h2 class="section-title">本周活跃榜</h2>
      <ul class="user-list">
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=6" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">刘阳</div>
            <div class="user-meta">摄影博主 · 发布了32篇内容</div>
            <div class="user-interaction">
              <div class="interaction-item">
                <i class="fa fa-heart-o"></i>
                <span>2.5k</span>
              </div>
              <div class="interaction-item">
                <i class="fa fa-comment-o"></i>
                <span>386</span>
              </div>
              <div class="interaction-item">
                <i class="fa fa-share-alt"></i>
                <span>152</span>
              </div>
            </div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=7" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">周婷</div>
            <div class="user-meta">旅行博主 · 发布了24篇内容</div>
            <div class="user-interaction">
              <div class="interaction-item">
                <i class="fa fa-heart-o"></i>
                <span>1.8k</span>
              </div>
              <div class="interaction-item">
                <i class="fa fa-comment-o"></i>
                <span>245</span>
              </div>
              <div class="interaction-item">
                <i class="fa fa-share-alt"></i>
                <span>98</span>
              </div>
            </div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-following">已关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=8" alt="用户头像" class="user-avatar">
            <span class="user-status status-away"></span>
          </div>
          <div class="user-info">
            <div class="user-name">吴强</div>
            <div class="user-meta">美食博主 · 发布了41篇内容</div>
            <div class="user-interaction">
              <div class="interaction-item">
                <i class="fa fa-heart-o"></i>
                <span>3.2k</span>
              </div>
              <div class="interaction-item">
                <i class="fa fa-comment-o"></i>
                <span>512</span>
              </div>
              <div class="interaction-item">
                <i class="fa fa-share-alt"></i>
                <span>217</span>
              </div>
            </div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 3. 网格卡片式活跃用户列表 -->
  <div id="style3" class="user-style">
    <div class="header">
      <button class="header-btn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="header-title">发现好友</h1>
      <button class="header-btn">
        <i class="fa fa-refresh"></i>
      </button>
    </div>
    
    <div class="content">
      <h2 class="section-title">可能认识的人</h2>
      <ul class="user-list">
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=9" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">郑晓</div>
            <div class="user-meta">12位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=10" alt="用户头像" class="user-avatar">
            <span class="user-status status-offline"></span>
          </div>
          <div class="user-info">
            <div class="user-name">孙琳</div>
            <div class="user-meta">8位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=11" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">马明</div>
            <div class="user-meta">24位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-following">已关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=12" alt="用户头像" class="user-avatar">
            <span class="user-status status-away"></span>
          </div>
          <div class="user-info">
            <div class="user-name">朱琳</div>
            <div class="user-meta">5位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=13" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">胡军</div>
            <div class="user-meta">17位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=14" alt="用户头像" class="user-avatar">
            <span class="user-status status-offline"></span>
          </div>
          <div class="user-info">
            <div class="user-name">林小红</div>
            <div class="user-meta">9位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-following">已关注</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 4. 带最近动态式活跃用户列表 -->
  <div id="style4" class="user-style">
    <div class="header">
      <button class="header-btn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="header-title">好友动态</h1>
      <button class="header-btn">
        <i class="fa fa-cog"></i>
      </button>
    </div>
    
    <div class="content">
      <h2 class="section-title">最近活跃好友</h2>
      <ul class="user-list">
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=15" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">郭晓华</div>
            <div class="user-meta">30分钟前</div>
            <div class="user-recent">
              刚发布了新照片：「周末去了郊外的咖啡馆，环境超赞！」
            </div>
            <div class="recent-time">查看详情</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-message">私信</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=16" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">何静</div>
            <div class="user-meta">2小时前</div>
            <div class="user-recent">
              分享了一篇文章：「设计师必备的10个高效工作技巧」
            </div>
            <div class="recent-time">查看详情</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-message">私信</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=17" alt="用户头像" class="user-avatar">
            <span class="user-status status-offline"></span>
          </div>
          <div class="user-info">
            <div class="user-name">高伟</div>
            <div class="user-meta">昨天</div>
            <div class="user-recent">
              评论了你的动态：「这个想法很棒，我也试试！」
            </div>
            <div class="recent-time">回复评论</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-message">私信</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 5. 深色模式活跃用户列表 -->
  <div id="style5" class="user-style">
    <div class="header">
      <button class="header-btn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="header-title">活跃用户</h1>
      <button class="header-btn">
        <i class="fa fa-search"></i>
      </button>
    </div>
    
    <div class="content">
      <h2 class="section-title">推荐关注</h2>
      <ul class="user-list">
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=18" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">黄小红</div>
            <div class="user-meta">UX设计师 · 256位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=19" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">徐亮</div>
            <div class="user-meta">产品经理 · 143位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=20" alt="用户头像" class="user-avatar">
            <span class="user-status status-away"></span>
          </div>
          <div class="user-info">
            <div class="user-name">宋佳</div>
            <div class="user-meta">数据分析师 · 98位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-following">已关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=21" alt="用户头像" class="user-avatar">
            <span class="user-status status-offline"></span>
          </div>
          <div class="user-info">
            <div class="user-name">杨明</div>
            <div class="user-meta">市场总监 · 178位共同好友</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 6. 标签筛选式活跃用户列表 -->
  <div id="style6" class="user-style">
    <div class="header">
      <button class="header-btn">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="header-title">社区达人</h1>
      <button class="header-btn">
        <i class="fa fa-filter"></i>
      </button>
    </div>
    
    <div class="filter-bar">
      <div class="filter-tag active">全部达人</div>
      <div class="filter-tag">设计领域</div>
      <div class="filter-tag">技术领域</div>
      <div class="filter-tag">职场领域</div>
      <div class="filter-tag">生活领域</div>
      <div class="filter-tag">创意领域</div>
    </div>
    
    <div class="content">
      <h2 class="section-title">推荐关注</h2>
      <ul class="user-list">
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=22" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">
              林创意
              <span class="user-badge badge-verified">认证</span>
            </div>
            <div class="user-meta">资深UI设计师 · 12.5k粉丝</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=23" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">
              编程达人
              <span class="user-badge badge-popular">热门</span>
            </div>
            <div class="user-meta">全栈开发工程师 · 8.3k粉丝</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-following">已关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=24" alt="用户头像" class="user-avatar">
            <span class="user-status status-away"></span>
          </div>
          <div class="user-info">
            <div class="user-name">
              职场导师
              <span class="user-badge badge-verified">认证</span>
            </div>
            <div class="user-meta">人力资源总监 · 15.7k粉丝</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
        <li class="user-item">
          <div style="position: relative;">
            <img src="https://picsum.photos/200/200?random=25" alt="用户头像" class="user-avatar">
            <span class="user-status status-online"></span>
          </div>
          <div class="user-info">
            <div class="user-name">
              新手上路
              <span class="user-badge badge-new">新用户</span>
            </div>
            <div class="user-meta">产品设计师 · 1.2k粉丝</div>
          </div>
          <div class="user-action">
            <button class="action-btn btn-follow">关注</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 样式切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的样式页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.user-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 关注按钮切换功能
    document.querySelectorAll('.btn-follow, .btn-following').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.classList.contains('btn-follow')) {
          this.classList.remove('btn-follow');
          this.classList.add('btn-following');
          this.textContent = '已关注';
        } else {
          this.classList.remove('btn-following');
          this.classList.add('btn-follow');
          this.textContent = '关注';
        }
      });
    });
    
    // 筛选标签切换功能
    document.querySelectorAll('.filter-tag').forEach(tag => {
      tag.addEventListener('click', function() {
        document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    // 联系人选择功能（第4种样式）
    document.querySelectorAll('#style4 .user-item').forEach(item => {
      item.addEventListener('click', function(e) {
        // 如果点击的是按钮，不触发整行点击
        if (e.target.closest('.action-btn')) return;
        
        const userName = this.querySelector('.user-name').textContent;
        alert(`查看${userName}的详细动态`);
      });
    });
    
    // 初始化 - 隐藏所有样式，只显示默认样式
    document.querySelectorAll('.user-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'flex';
        style.style.flexDirection = 'column';
      }
    });
  </script>
</body>
</html>
